<template>
  <div id="order-detail-seller">
    <!-- 导航栏 -->
    <van-nav-bar @click-left="back" class="navbar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#f7f8fa" />
      </template>
    </van-nav-bar>

    <!-- 订单详情 -->
    <div class="container">
      <van-cell-group class="seller-info">
        <template #title>
          <span class="group-title">{{order.id}}</span>
          <span v-if="order.image != ''" class="progress">{{status[order.sellOrBuy]}}</span>
          <span v-else class="progress">{{status2[order.sellOrBuy]}}</span>
        </template>
        <van-cell v-if="!this.$route.params.finish" :title="order.sellOrBuy == 0 ? '买家信息' : '卖家信息'" icon="contact" />
        <van-cell v-if="!this.$route.params.finish" title="姓名" v-model="name" />
        <van-cell v-if="!this.$route.params.finish" title="支付宝" v-model="phone" />
        <van-cell v-if="!this.$route.params.finish" title="手机号" v-model="phone" />
      </van-cell-group>

      <van-cell-group class="cell-group">
        <van-cell title="总金额" :value="order.sum + ' CNY'" value-class="total" />
        <van-cell title="交易数量" :value="order.num" />
        <van-cell title="单价" :value="order.price" />
        <van-cell title="创建时间" :value="order.time" />
        <van-cell title="付款截图">
          <template #default>
            <van-image
              v-if="order.image != ''"
              v-for="image in images"
              width="80"
              height="80"
              :src="image"
              @click="preview"
            />
            <van-uploader
              v-if="order.image == '' && sellOrBuy == 1"
              v-model="images"
              :after-read="afterRead"
              :max-count="1"
            />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 底部按钮 -->
    <van-tabbar v-model="active" active-color="#545c80" inactive-color="#545c80">
      <van-tabbar-item icon="circle" @click="appeal" v-if="sellOrBuy == 0">申诉</van-tabbar-item>
      <van-tabbar-item icon="exchange" @click="finishOrder" v-if="sellOrBuy == 0">确认发货</van-tabbar-item>
      <van-tabbar-item icon="exchange" @click="submit" v-if="sellOrBuy == 1 && order.image == ''">完成订单</van-tabbar-item>
    </van-tabbar>

    <!-- 申诉Dialog -->
    <van-dialog v-model="show" show-cancel-button closeOnClickOverlay>
      <!-- 表单 -->
      <van-form style="height: 100%">
        <van-cell title="选择分类" style="margin-top: 10px">
          <template #label>
            <van-radio-group v-model="radio">
              <van-radio name="1" class="radio">
                <template #icon="props">
                  <van-button size="small" color="#545c80" :plain="!props.checked">功能异常</van-button>
                </template>
              </van-radio>
              <van-radio name="2" class="radio">
                <template #icon="props">
                  <van-button size="small" color="#545c80" :plain="!props.checked">bug反馈</van-button>
                </template>
              </van-radio>
              <van-radio name="3" class="radio">
                <template #icon="props">
                  <van-button size="small" color="#545c80" :plain="!props.checked">意见建议</van-button>
                </template>
              </van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-cell title="详细描述">
          <template #label>
            <van-field
              v-model="desc"
              rows="2"
              type="textarea"
              maxlength="100"
              placeholder="请输入详细描述"
              class="desc"
              show-word-limit
              autosize
            />
          </template>
        </van-cell>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
  import store from '@/store';
  import axios from 'axios';
  import Vue from 'vue';
  import * as qiniu from 'qiniu-js';
  import uuidv1 from 'uuid/v1';
  import * as base64 from 'js-base64';
  import { ImagePreview, Dialog, RadioGroup, Radio, Field, Toast } from 'vant';

  Vue.use(ImagePreview);
  Vue.use(Dialog);
  Vue.use(Radio);
  Vue.use(RadioGroup);
  Vue.use(Field);
  Vue.use(Toast);

  var orderId = 0;
  var self;

  export default  {
    name: "OrderDetail",
    data() {
      return {
        name: '',
        phone: '',
        sellOrBuy: '',
        active: 1,
        time: 30 * 60 * 60 * 1000,
        images: [],
        show: false,
        radio: '1',
        type: '',
        desc: '',
        order: {},
        user: getUser(),
        putExtra: { // 七牛云配置
          fname: "",
          params: {},
          mimeType: []
        },
        status: { // 订单状态
          0: '买家已付款',
          1: '已付款',
          2: '申诉中',
        },
        status2: { // 订单状态
          0: '等待买家付款',
          1: '未付款',
          2: '申诉中',
        },
        config: { // 七牛云配置
          useCdnDomain: true,
          region: qiniu.region.z2
        },
        observer: { // 七牛云上传观察者
          next(res){
            // ...
          },
          error(err){
            console.log(err);
            Toast({
              message: '上传图片至七牛云失败,请联系工程师',
              position: 'bottom',
            });
          },
          complete(res){
            axios.get(store.state.api + '/market/submitOrder', {
              params: {
                uid: getUser().uid,
                orderId: orderId,
                key: res.key,
              }
            }).then(res => {
              if (res.data.code == '200') {
                Toast({
                  message: '上传凭证成功,已发送短信提醒卖家',
                  position: 'bottom',
                });
                self.back()
              } else {
                Toast({
                  message: res.data.msg,
                  position: 'bottom',
                });
              }
            }).catch(error => {
              Toast({
                message: '确认订单失败',
                position: 'bottom',
              });
            });
          }
        }
      };
    },
    methods: {
      back() {
        this.$router.back(-1);
      },
      preview() { // 图片预览
        ImagePreview(this.images)
      },
      appeal() { // 申诉
        Dialog({
          message: '确认要进行申诉,申诉之后双方都无法进行交易',
          showCancelButton: true,     // 是否展示取消按钮
          closeOnClickOverlay: true,  // 是否在点击遮罩层后关闭弹窗
        }).then(() => { // 点击确认
          axios.get(store.state.api + '/market/appeal', {
            params: {
              uid: this.user.uid,
            }
          }).then(res => {
            if (res.data.code == '200') {
              Toast({
                message: res.data.msg,
                position: 'bottom',
              });
              this.$router.back(-1);
            } else {
              Toast({
                message: res.data.msg,
                position: 'bottom',
              });
            }
          }).catch(error => {
            Toast({
              message: '系统繁忙',
              position: 'bottom',
            });
          });
        })
        .catch(() => {

        });
      },
      //图片
      afterRead(file) {
        this.images[0] = file;
      },
      //完成订单
      submit(){
        if (this.images[0]) {
          var file = this.images[0].file;
          axios.get(store.state.api + '/market/getToken')
            .then(res => {
            if (res.data.code == '200') {
              //七牛云上传
              const token = res.data.data;
              var key = uuidv1() + ".png";
              var observable = qiniu.upload(file, key, token, this.putExtra, this.config);
              var subscription = observable.subscribe(this.observer);
            }
          }).catch(error => {
            Toast({
              message: '图片已经上传',
              position: 'bottom',
            });
          });

        } else {
          Toast({
            message: '请上传支付凭证',
            position: 'bottom',
          });
        }
      },

      // 卖家确认收货，完成交易
      finishOrder(){
        var g = base64.encode(getUser().token);
        axios.get(store.state.api + '/market/finishOrder', {
          params: {
            g: g,
          }
        }).then(res => {
          if (res.data.code == '200') {
            Toast({
              message: '发货成功',
              position: 'bottom',
            });
            this.back();
          }else {
            Toast({
              message: res.data.msg,
              position: 'bottom',
            });
          }
        }).catch(error => {

        });
      }
    },
    mounted() {
      self = this;
      this.name = this.$route.params.name;
      this.phone = this.$route.params.phone;
      this.sellOrBuy = this.$route.params.sellOrBuy;
      // 获取订单详情
      axios.get(store.state.api + '/market/getOrderDetails', {
        params: {
          orderId: this.$route.params.id,
          uid: this.$route.params.uid,
        }
      }).then(res => {
        if (res.data.code == '200') {
          this.order = res.data.data;
          this.order.sellOrBuy = this.$route.params.sellOrBuy;
          orderId = this.$route.params.id;
          if(res.data.data.image != null && res.data.data.image != undefined && res.data.data.image != ""){
            this.images = [res.data.data.image];
          }
        }
      }).catch(error => {

      });
    },
  }

  function getUser() {
    return JSON.parse(sessionStorage.getItem('user'));
  }

</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }

  /* 订单详情 */
  .container {
    position: fixed;
    top: 44px;
    bottom: 50px;
    width: 100%;
    overflow: auto;
    background-color: #fff;
  }
  .seller-info .van-cell {
    background-color: #F6F7FB;
  }
  .group-title {
    color: #2E4356;
    font-size: 20px;
    margin: 10px 0;
    display: inline-block;
    font-weight: 700;
  }
  .progress {
    color: #7486AA;
    float: right;
    margin: 10px 0;
    display: inline-block;
    font-weight: 700;
  }
  .van-cell,.van-cell__value {
    color: #9FA6AE;
  }
  .van-cell__value {
    color: #585D61;
  }
  .seller-info {
    margin: 0 15px 15px;
  }
  .van-cell::after {
    border: none;
  }
  .cell-group::after {
    border: none;
  }
  .total {
    color: #7486AA;
    font-size: 20px;
  }

  /* 申诉样式 */
  .van-radio {
    display: inline-block;
  }
  .radio {
    height: 35px;
    margin-right: 4px
  }
  .desc {
    padding: 0;
  }

  /* 倒计时 */
  .count-down {
    color: #545c80;
    font-size: 14px;
  }
  .center {
    text-align: center;
  }
</style>
